<template>
  <div class="center">
    <a-row :gutter="24">
      <!-- start leftSide -->
      <a-col :md="24" :lg="7">
        <a-card :bordered="true" type="inner" class="cardWrap">
          <div class="account-center-avatarHolder">
            <a-avatar :size="64" style="backgroundColor:#2db7f5;margin:15px 0;" icon="user" />
            <div class="username">{{ userName || '' }}</div>
            <!-- <div class="bio">海纳百川，有容乃大</div> -->
          </div>
          <div class="account-center-detail">
            <p>
              <i class="title"></i>
            </p>
            <p>
              <i class="group"></i>
              <label>邮箱: </label>
              {{ merchInfo.email }}
            </p>
            <p>
              <i class="group"></i>
              <label>手机号码: </label>
              {{ merchInfo.phone }}
            </p>
            <p>
              <i class="group"></i>
              <label>角色: </label>
              {{ merchInfo.role && merchInfo.role.name }}
            </p>
            <!-- <p>
              <i class="address"></i>
              <span>浙江省</span>
              <span>杭州市</span>
            </p> -->
          </div>
          <!-- <a-divider/> -->
          <a-divider/>
          <div class="account-center-tags">
            <div class="tagsTitle"><b>通道</b></div>
            <div>
              <template v-for="(tag, index) in tags">
                <a-tag
                  :key="index"
                  :color="channelId === tag.id ? '#108ee9' :''"
                  @click="channelId = tag.id"
                >{{ tag.channelName }}</a-tag>
              </template>
              <!-- <a-input
                v-if="tagInputVisible"
                ref="tagInput"
                type="text"
                size="small"
                :style="{ width: '78px' }"
                :value="tagInputValue"
                @change="handleInputChange"
                @blur="handleTagInputConfirm"
                @keyup.enter="handleTagInputConfirm"
              /> -->
              <!-- <a-tag v-else @click="showTagInput" style="background: #fff; borderStyle: dashed;">
                <a-icon type="plus"/>New Tag
              </a-tag> -->
            </div>
          </div>
        </a-card>
      </a-col>
      <!-- end leftSide -->

      <!-- start rightSide -->
      <a-col :md="24" :lg="17">
        <!-- <a-card title="支付类型" :bordered="true" type="inner" class="cardWrap">

        </a-card> -->
        <a-tabs defaultActiveKey="1">
          <a-tab-pane tab="支付类型" key="1">
            <rightSide :channelId="channelId" />
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <!-- end rightSide -->
    </a-row>
  </div>
</template>

<script>
import * as API from "../../api/center";
import rightSide from "./commponent/rightSide";
import { mapState } from 'vuex'

export default {
  name: "center",
  data() {
    return {
      tags: [],
      merchInfo: {},
      channelId: null,
      userName: ''
    };
  },
  components: {
    rightSide
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  mounted() {
    this.mcpChannelDetailList()
  },
  activated() {},
  methods: {
    mcpChannelDetailList() {
      let id = this.userInfo.merchantRespParams ? this.userInfo.merchantRespParams.id : (this.$route.query.id || '')
      API.mcpChannelDetail(id).then(res => {
        if (res.code === 200) {
          this.tags = res.data.channelParams;
          this.merchInfo = res.data.merchantParams.userRespParams;
          this.userName = res.data.merchantParams.merchantName
          !!this.tags.length && (this.channelId = this.tags[0].id)
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
.center{
  .cardWrap{
    border-radius: 10px;
  }
  .tagsTitle{
    margin-bottom: 15px;
  }
  .ant-tag {
    margin-bottom: 10px;
  }
}
</style>